<template>
    <div
        style="height: 100vh;background-size: cover;background-image:linear-gradient(45deg,#fd780a,#646cff,#fd780a,#4cd964);">
        <div class="cm-login">
            <img class="cm-login-image" src="/admin_bg.jpg" />
            <a-form class="cm-login-form" ref="formRef" :labelCol="{ style: 'width:60px' }" :model="formState">
                <img src="/logo.png" style="width:100%;height: 75px;object-fit: contain;" />
                <h2 class="cm-login-form-title">欢迎使用</h2>
                <a-form-item label="用户名" name="userName" :rules="[{ required: true, message: '请输入用户名' }]">
                    <a-input :maxlength="20" v-model:value="formState.userName" />
                </a-form-item>
                <a-form-item label="密码" name="password" :rules="[{ required: true, message: '请输入密码' }]">
                    <a-input-password @keyup.enter="submitFormdata" :maxlength="20" type="password" v-model:value="formState.password" />
                </a-form-item>
                <a-form-item style="margin-top: 20px;" label="">
                    <div style="display: flex;justify-content: flex-end;">
                        <a-button type="primary" @click="submitFormdata">登录</a-button>
                    </div>
                </a-form-item>
            </a-form>
        </div>

    </div>
</template>
<script lang="ts" setup>
import { loginService } from "@/service";
import { useRouter } from "vue-router";
import { reactive, ref } from "vue";
import { CommonStore } from "@/store";

const formRef = ref();
const router = useRouter();

const commonStore = CommonStore();
const formState = reactive({
    userName: "",
    password: ""
});

const submitFormdata = () => {
    formRef.value.validate()
        .then(async () => {
            let res = await loginService.login(formState);
            console.log("res--->", res, res.code === 0)
            if (res.code === 0) {
                commonStore.$state.user = res.data.user;
                commonStore.$state.token = res.data.token;
                commonStore.$state.storeList = res.data.storeList;
                commonStore.$state.userList = res.data.userList;
                router.push("/user")
            }
        })

}
</script>
<style lang="less" scoped>
.cm-login {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 800px;
    height: 400px;
    transform: translate(-50%, -50%);
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 20px;
    background-color: white;
    display: flex;
}

.cm-login-form {
    width: 400px;
    padding: 20px;
}

.cm-login-image {
    width: 400px;
}

.cm-login-form-title {
    text-align: center;
    margin-bottom: 20px;
    margin-top: 10px;
}
</style>